import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Sidebar, Toast } from 'react-vant';
import { ArrowLeft, Search, Bookmark, GoodsCollectO } from "@react-vant/icons";
import TopTitleBar from "../../components/TopTitleBar";
import "./index.css";
import axios from "../../utils/axios";
const CategoryPage = () => {
    const navigate = useNavigate();
    const [active, setActive] = useState(0);
    const [categoriesList, setCategoriesList] = useState([]);
    const handleSidebar = (v) => {
        setActive(v);
    }

    const getCategories = () => {
        axios.get('/api/v1/categories').then(res => {
            if (res.data.message === 'SUCCESS') {
                setCategoriesList(res.data.data)
            }
        })
    }
    useEffect(() => {
        getCategories();
    }, [])

    return (
        <div className="categoryPage">
            < TopTitleBar
                topTitleBarBackgroundColor='#fff'
                leftIcon={<ArrowLeft onClick={() => navigate(-1)} />}
                rightIconStyle="rightIconStyle"
                lable={
                    <Search />
                }
                searchBackground
                searchRightText="全场50元起步"
                searchContentFun={() => navigate('/search')}
            />

            <Sidebar
                value={active}
                onChange={(v) => handleSidebar(v)
                }
                sideClassName='sideTitle'
            >
                {
                    categoriesList.map(categories => {
                        return <Sidebar.Item
                            contentClassName="categoryContent"
                            key={categories.categoryId}
                            title={categories.categoryName}
                        >
                            {
                                categories.secondLevelCategoryVOS.map(category => {
                                    return (
                                        <div key={category.categoryId}>
                                            <div className="categoryName">
                                                {category.categoryName}
                                            </div>
                                            <div className="category">
                                                {category.thirdLevelCategoryVOS.map(sigleCategory => {
                                                    return (
                                                        <div
                                                            key={sigleCategory.categoryId}
                                                            className="sigleCategory"
                                                            onClick={() => navigate('/search', {
                                                                state: {
                                                                    goodsCategoryId: sigleCategory.categoryId
                                                                }
                                                            })}
                                                        >
                                                            <GoodsCollectO color="#1baeae" fontSize={50} />
                                                            <div className="categoryNameText">
                                                                {sigleCategory.categoryName}
                                                            </div>

                                                        </div>)
                                                })}
                                            </div>
                                        </div>


                                    )

                                })
                            }
                        </Sidebar.Item>

                    })
                }
            </Sidebar>
        </div>
    )
}

export default CategoryPage;